<template>
  <div class="dept" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;height: 100%;">
    <el-button v-if="hasRole('dept:setting:add')" type="primary" class="buttonAdd button_add_zl" @click="addDept"> <i class="fa fa-plus" aria-hidden="true"></i> 添加部门 </el-button>
    <div class="contains">
      <tree-table ref="recTree" :list.sync="treeDataSource" @actionFunc="actionFunc" @deleteFunc="deleteFunc" @handlerExpand="handlerExpand" @orderByFunc="orderByFunc"></tree-table>
    </div>
    <add-dept :data-detail="addDeptData"></add-dept>
    <edit-dept :data-detail="editDeptData"></edit-dept>
  </div>
</template>
<script>
  import treeTable from '@/components/wh-tree/checkTree.vue'
  import addDept from "./addDept.vue";
  import editDept from "./editDept.vue";
  export default {
    data() {
      return {
        treeDataSource: [], // 组合成树表格接收的数据
        addDeptData: {},
        editDeptData: {}
      }
    },
    components: {
      treeTable,
      addDept,
      editDept
    },
    mounted() {
      let self = this;
      self.$eventBus.$on("refreshDept", function() {
        self.getDeptList();
      });
      self.getDeptList();
    },
    methods: {
      getDeptList() {
        let self = this;
        self.$http({
          url: "/autoMonitor/dept/queryDeptList",
          method: "post",
        }).then(resp => {
          if(resp.success) {
            self.treeDataSource = resp.result;
          }
        });
      },
      addDept() {
        this.addDeptData = {
          pId: "",
          remark: "",
          deptName: "",
          id: "",
          deptLevel: "1",
          createUser: ""
        };
      },
      orderByFunc(val) {
        this.treeDataSource = this.treeDataSource.reverse();
      },
      actionFunc(m) {
        this.editDeptData = {
          id: m.id,
          deptName: m.deptName,
          remark: m.remark
        };
      },
      deleteFunc(m) {
        let self = this;
        let param = {
          id: m.id,
          status: "-1"
        };
        self.$confirm('确定删除该部门？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/dept/updateDeptDetail",
            method: "post",
            params: param,
          }).then(resp => {
            if(resp.success) {
              self.getDeptList();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'success'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "操作失败，请联系管理员！",
              type: 'error'
            });
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      },
      handlerExpand(m) {
        m.isExpand = !m.isExpand
      }
    }
  }
</script>
<style>
  .dept .buttonAdd {
    margin-bottom: 15px;
    font-size: 12px;
    border-radius: 13px;
    cursor: pointer;
    padding: 5px 9px !important;
  }
</style>